import React, { useState, useMemo } from 'react'
import { ReactSortable } from "react-sortablejs";
import { AlignCenterOutlined } from '@ant-design/icons'
import './index.less'
const SortList = (props) => {
    const { list, childrenData, renderProps, onSort, groupName } = props
    return <ReactSortable
        list={list}
        animation={200}
        group={{ name: groupName || "sort-field" }}
        sort={true}
        forceFallback={true}
        setList={(e, o, i) => {
            onSort(e)
        }}>
        {childrenData.map((val, o) => {
            return <div key={val.key || o} className='SortList_box'>

                {renderProps(val, o)}
                <div className='SortList_left'>
                    <AlignCenterOutlined className='SortList_icon' />
                </div>
            </div>
        })
        }
    </ReactSortable>

}
export default SortList
